<template>
  <div class="business-page">
    <Back-top></Back-top>
    <Nav active-name="business"/>
    <div class="breadcrumb-holder flex-row-v-center">
      <div class="item">首页</div>
      <img class="arrow" src="~assets/img/icon-right-arrow.png" />
      <div class="item active">业务介绍</div>
    </div>
    <div class="sec-01">
      <div class="top-box flex-col-v-center">
        <img src="~assets/img/business/bg.png">
      </div>
      <div class="info-box flex-col-v-center">
        <img class="logo" src="~assets/img/tmp/logo.png" />
        <div class="txt">
          这里是公司介绍这里是公司介绍这里是公司介绍这里是公司介绍这里是公司介绍这里是公司介绍这里是公司介绍这里是公司介绍这里是公司介绍这里是公司介绍这里是公司介绍
        </div>
      </div>
      <div class="item-1-box flex-col-v-center">
        <div class="title-box flex-center">挂牌代售业务</div>
        <div class="tip-box">
          代收费为号价<span>5%</span>（最低50元）
        </div>
        <div class="deal-box">
          <img src="~assets/img/deal-bg.png">
          <div class="flex-row-v-center">
            <div class="item flex-center">上号截图</div>
            <div class="item flex-center">广告编辑</div>
            <div class="item flex-center">官网发布</div>
            <div class="item flex-center">寻找买家</div>
            <div class="item flex-center">担保交易</div>
          </div>
        </div>
      </div>
      <div class="item-2-box flex-col-v-center">
        <div class="title-box flex-center">中介担保业务</div>
        <div class="content-box">
          <div class="item flex-row-v-center">
            <div class="icon"></div>
            <div class="p">买卖双方商量好交易金额找代售担保交易</div>
          </div>
          <div class="item flex-row-v-center">
            <div class="icon"></div>
            <div class="p">收取中介费10元，费用买卖双方自行商量谁出</div>
          </div>
          <div class="item flex-row-v-center">
            <div class="icon"></div>
            <div class="p">代售会默认收取卖家身份证信息并验证真假，如不能提供请提前告知买家</div>
          </div>
          <div class="tip-box">
            <div class="p">注：任意方取消交易，中介手续费不退</div>
            <div class="p">注：中介交易，平台只是担保交易过程，不对账号安全负有安全责任，担心安全请购买找回包赔服务</div>
          </div>
        </div>
      </div>
      <div class="item-3-box flex-col-v-center">
        <div class="title-box flex-center">提供法律合同</div>
        <div class="content-box">
          <div class="item flex-row-v-center">
            <div class="icon"></div>
            <div class="p">提供签署官方认证具有法律效应的合同，在买卖双方同意的情况下签署</div>
          </div>
          <div class="item flex-row-v-center">
            <div class="icon"></div>
            <div class="p">找律师分别针对一手号、多手号、只卖游戏、分期付款四种情况拟出不同合同</div>
          </div>
          <div class="item flex-row-v-center">
            <div class="icon"></div>
            <div class="p">采用通过视频验证后签署的电子签名完成签署，快速方便有效，永久保存（纸质合同没法判断是否为卖家本人所签可能出现不具有法律效益）</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    goToOtherGame() {
      window.open('http://localhost:3000', '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.business-page {
  background: rgb(245, 245, 245);
  .breadcrumb-holder {
    width: 1200px;
    height: 62px;
    margin: auto;
    .item {
      font-weight: 500;
      font-size: 16px;
      color: #A6ACB3;
      cursor: pointer;
      &.active {
        color: #3A3D41;
      }
    }
    .arrow {
      margin: 0 10px;
      width: 16px;
      height: 16px;
    }
  }

  .sec-01 {
    min-width: 1200px;
    .top-box {
      width: 100%;
      height: 200px;
      background-image: linear-gradient(269deg, #FBC111 0%, #F68E07 100%);
      img {
        margin-top: 50px;
        width: 233px;
        height: 27px;
      }
    }
    .info-box {
      width: 1200px;
      margin: -72px auto 0 auto;
      background: #FFFFFF;
      border-radius: 10px;
      padding: 30px 0;
      .logo {
        width: 104px;
        height: 30px;
      }
      .txt {
        width: 800px;
        margin: 0 auto;
        padding: 24px 0 8px 0;
        font-size: 14px;
        color: #3A3D41;
        text-align: center;
        line-height: 24px;
      }
    }
    .item-1-box {
      width: 1200px;
      background: #ffffff;
      margin: 20px auto 0 auto;
      padding-bottom: 34px;
      .title-box {
        width: 155px;
        height: 40px;
        font-weight: 600;
        font-size: 17px;
        color: #F58B01;
        background: url("~assets/img/title-bg.png") center center;
        background-size: cover;
      }
      .tip-box {
        margin-top: 36px;
        font-size: 14px;
        color: #7F8389;
        line-height: 20px;
        span {
          color: #F58B01;
        }
      }
      .deal-box {
        margin-top: 29px;
        width: 540px;
        font-size: 0;
        img {
          width: 100%;
          height: 60px;
          margin-bottom: 14px;
        }
        .item {
          width: 60px;
          margin-right: 60px;
          font-size: 14px;
          color: #3A3D41;
          line-height: 20px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .item-2-box, .item-3-box {
      width: 1200px;
      background: #ffffff;
      margin: 20px auto 0 auto;
      padding-bottom: 8px;
      .title-box {
        width: 155px;
        height: 40px;
        font-weight: 600;
        font-size: 17px;
        color: #F58B01;
        background: url("~assets/img/title-bg.png") center center;
        background-size: cover;
      }
      .content-box {
        width: 100%;
        padding: 20px 120px;
        .item {
          .icon {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 10px;
            background: #FFD9A7;
          }
          .p {
            font-size: 14px;
            color: #3A3D41;
            line-height: 24px;
          }
        }
        .tip-box {
          margin-top: 20px;
          .p {
            font-size: 12px;
            color: #7F8389;
            line-height: 17px;
          }
        }
      }
    }
  }
}
</style>
